<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/head-common.css">
    <link rel="stylesheet" href="css/my-order.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 头部logo -->
        <img class="logo-img" src="images/logo.png" alt="">

        <!-- head版心 -->
        <div class="head-c">
            <ul class="head-nav">
                <li class="head-list">
                    <a class="head-link link-a1" href="#">首页</a>
                </li>
                <li class="head-list">
                    <a class="head-link" href="#">女装</a>
                </li>
                <li class="head-list">
                    <a class="head-link" href="#">男装</a>
                </li>
                <li class="head-list">
                    <a class="head-link" href="#">箱包</a>
                </li>
                <li class="head-list">
                    <a class="head-link" href="#">配饰</a>
                </li>
            </ul>

            <!-- head搜索框  -->
            <div class="search">
                <input class="skk-input" type="text" placeholder="我的购物车">
                <span class="num">11</span>
                <a class="set-link" href="#">
                    <img class="set-img" src="images/设置.png" alt="">
                </a>

                <!-- 购物车弹窗 -->
                <div class="drop">
                    <div class="drop-list">
                        <img src="images/drop-cart.png" alt="">
                        <div class="drop-p">
                            <p>女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <p>尺码：S   颜色：米色</p>
                        </div>

                        <div class="drop-del">
                            <span class="ins">¥699<i>×1</i> </span>
                            <span class="del">删除</span>
                        </div>
                    </div>
                    <div class="drop-list">
                        <img src="images/drop-cart.png" alt="">
                        <div class="drop-p">
                            <p>女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <p>尺码：S   颜色：米色</p>
                        </div>

                        <div class="drop-del">
                            <span class="ins">¥699<i>×1</i> </span>
                            <span class="del">删除</span>
                        </div>
                    </div>
                    <div class="drop-list">
                        <img src="images/drop-cart.png" alt="">
                        <div class="drop-p">
                            <p>女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <p>尺码：S   颜色：米色</p>
                        </div>

                        <div class="drop-del">
                            <span class="ins">¥699<i>×1</i> </span>
                            <span class="del">删除</span>
                        </div>
                    </div>
                    <div class="drop-list">
                        <img src="images/drop-cart.png" alt="">
                        <div class="drop-p">
                            <p>女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <p>尺码：S   颜色：米色</p>
                        </div>

                        <div class="drop-del">
                            <span class="ins">¥699<i>×1</i> </span>
                            <span class="del">删除</span>
                        </div>
                    </div>
                    
                    <div class="drop-complete">
                        <span class="piece">共<i>13</i>件商品</span>
                        <a class="check-cart" href="#">查看购物车</a>
                    </div>
                </div>

            </div>
        </div>
    </header>

    <!-- 内容区 -->
    <div class="container">
        <div class="container-c">
            <div class="content">
                <h3 class="my-order">我的订单</h3>
                <input class="order-input" type="text" placeholder="搜索订单/订单编号">
                <img class="order-search" src="images/搜索.png" alt="">

                <!-- 我的订单 -->
                <div class="order-nav">
                    <ul class="order-list">
                        <li class="order-item li1">
                            <a class="order-nav-link" href="#">
                                <img class="order-nav-img" src="images/钱包.png" alt="">
                                <p>待付款</p>
                            </a>
                        </li>
                        <li class="order-item li2">
                            <a class="order-nav-link" href="#">
                                <img class="order-nav-img" src="images/待收货.png" alt="">
                                <p>待收获</p>
                            </a>
                        </li>
                        <li class="order-item li3">
                            <a class="order-nav-link" href="#">
                                <img class="order-nav-img" src="images/评价.png" alt="">
                                <p>待评价</p>
                            </a>
                        </li>
                        <li class="order-item li4">
                            <a class="order-nav-link" href="#">
                                <img class="order-nav-img" src="images/无忧售后.png" alt="">
                                <p>退还/售后</p>
                            </a>
                        </li>
                        <li class="order-item li5">
                            <a class="order-nav-link" href="#">
                                <img class="order-nav-img" src="images/订单.png" alt="">
                                <p>全部订单</p>
                            </a>
                        </li>
                    </ul>

                </div>

                <!-- 我的收藏、我的钱包 -->
                <div class="content-date">

                    <h3 class="left">我的收藏</h3>
                    <h3 class="right">我的钱包</h3>
                    <!-- 我的收藏 -->
                    <div class="collect date-box">
                        <ul>
                            <li class="list-num">13</li>
                            <li class="list-coll">商品收藏</li>
                        </ul>
                        <ul>
                            <li class="list-num">13</li>
                            <li class="list-coll">系列收藏</li>
                        </ul>

                    </div>

                    <!-- 我的钱包 -->
                    <div class="wallet date-box">
                        <ul>
                            <li class="list-num">3张</li>
                            <li class="list-coll">优惠卷</li>
                        </ul>
                        <ul>
                            <li class="list-num">0.00元</li>
                            <li class="list-coll">余额</li>
                        </ul>
                    </div>

                </div>

            </div>

        </div>
    </div>


    <script>
        

    </script>

</body>

</html>